<template>
	<el-dialog v-model="visible" :title="'进度配置'" :close-on-click-modal="false">
		<el-steps :active="active">
			<el-step title="构建reader" />
			<el-step title="构建writer" />
			<el-step title="字段映射" />
			<el-step title="构建" />
		</el-steps>
		<br />
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px" style="min-height: 400px" @keyup.enter="submitHandle()">
			<!-- reader -->
			<div v-show="active === 1">
				<el-form-item label="数据库源" prop="">
					<el-select placeholder="请选择" style="width: 100%">
						<el-option></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="数据库表名" prop="">
					<el-select placeholder="请选择" style="width: 100%">
						<el-option></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="SQL语句" prop="">
					<el-input type="textarea" :rows="4" placeholder="sql查询，一般用于多表关联查询时才用"></el-input>
				</el-form-item>
				<el-form-item label="切分字段" prop="">
					<el-input placeholder="切分主键"></el-input>
				</el-form-item>
				<el-form-item label="表所有字段" prop="">
					<el-checkbox label="全选" />
				</el-form-item>
				<el-form-item label="where条件" prop="">
					<el-input type="textarea" :rows="2" placeholder="where条件，不需要在加where"></el-input>
				</el-form-item>
			</div>
			<div v-show="active === 2">
				<el-form-item label="数据库源" prop="">
					<el-select placeholder="请选择" style="width: 100%">
						<el-option></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="数据库表名" prop="">
					<el-select placeholder="请选择" style="width: 100%">
						<el-option></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="字段" prop="">
					<el-checkbox label="全选" />
				</el-form-item>
				<el-form-item label="前置SQL语句" prop="">
					<el-input type="textarea" :rows="2" placeholder="前置sql在insert之前执行"></el-input>
				</el-form-item>
				<el-form-item label="postSql" prop="">
					<el-input type="textarea" :rows="2" placeholder="多个用;分隔"></el-input>
				</el-form-item>
			</div>

			<div v-show="active === 3">
				<el-form-item label="源端字段" prop="">
					<el-checkbox label="全选" />
				</el-form-item>
				<el-form-item label="目标字段" prop="">
					<el-checkbox label="全选" />
				</el-form-item>
			</div>
			<div v-show="active === 4" style="height: 400px">
				<el-button type="primary">构建</el-button>
				<!-- <el-button @click="copyBtn">复制json</el-button> -->

				<div style="height: 100%; margin-top: 10px">
					<DataStudioJson ref="dataStudioJsonRef"></DataStudioJson>
				</div>
			</div>
		</el-form>

		<template #footer>
			<div style="text-align: center">
				<el-button v-if="active === 1" @click="visible = false"> 取消 </el-button>
				<el-button v-if="active > 1" @click="pre()"> 上一步 </el-button>
				<el-button type="primary" @click="next()" v-if="active > 0 && active < 4"> 下一步 </el-button>
				<el-button type="primary" @click="submitHandle()" v-if="active == 4"> 提交 </el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import DataStudioJson from './data-studio-json.vue'
import { ElMessage } from 'element-plus'
const active = ref(1)
const visible = ref(false)

const dataFormRef = ref()
const dataForm = reactive({})
const dataRules = ref({})
//vscode编辑器
const dataStudioJsonRef = ref()

const pre = () => {
	if (active.value-- < 2) active.value = 1
}

const next = () => {
	if (active.value++ > 4) {
		active.value = 5
	} else if (active.value === 4) {
		dataStudioJsonRef.value.setEditorValue('')
	}
}

const submitHandle = () => {}

const init = id => {
	visible.value = true
}

const getActive = () => {
	return active.value
}

defineExpose({
	init,
	getActive
})
</script>
<style lang="scss" scoped>
</style>
